<template>
  <div class="card-out-container base-color-details">
    <a-spin :spinning="loading">
      <div class='blue-line mb-13'>{{ $t('hangManage.baseInfo') }}</div>
      <a-row :gutter="40">
        <a-col :span="18">
          <a-row :gutter="40">
            <a-col :span="8">
              <div>{{ $t('sysManage.client') }}:</div>
              <div>{{recordInfo.client && recordInfo.client.name}}</div>
            </a-col>
            <a-col :span="8">
              <div>{{$t('basicData.jobNo')}}:</div>
              <div>{{recordInfo.staffNo}}</div>
            </a-col>
            <a-col :span="8">
              <div>{{$t('basicData.name')}}:</div>
              <div>{{recordInfo.nickName}}</div>
            </a-col>
            <a-col :span="8">
              <div>{{ $t('other.sex') }}:</div>
              <div>{{recordInfo.sex == '0' ? $t('other.male'): recordInfo.sex == '1' ? $t('sysManage.female') : $t('sysManage.unknown')}}</div>
            </a-col>
            <a-col :span="8">
              <div>{{ $t('other.birthDay') }}:</div>
              <div>{{recordInfo.birthdate}}</div>
            </a-col>
            <a-col :span="8">
              <div>{{ $t('sysManage.phoneNo') }}:</div>
              <div class="mb-20">{{recordInfo.phonenumber}}</div>
            </a-col>
            <a-col :span="8">
              <div>{{ $t('sysManage.email') }}:</div>
              <div class="mb-20">{{recordInfo.email}}</div>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="6">
          <a-row class="m0">
            <a-col :span="24">
              <div>{{ $t('common.startState') }}:</div>
              <div>{{recordInfo.status == '1' ? $t('common.stop') : $t('common.start')}}</div>
            </a-col>
            <a-col :span="24">
              <div>{{ $t('hangManage.img') }}:</div>
              <div><img :src="recordInfo.avatar" alt="" v-if="recordInfo.avatar" @click="()=> handlePreviewToggle(true, recordInfo.avatar)"></div>
            </a-col>
          </a-row>
        </a-col>

      </a-row>
      <div class='blue-line mb-13'>{{ $t('other.positionMsg') }}</div>
      <a-row :gutter="40">
        <a-col :span="6">
          <div>{{$t('basicData.cardNo')}}:</div>
          <div>{{recordInfo.cardNo}}</div>
        </a-col>
        <a-col :span="6">
          <div>{{ $t('other.departGroup') }}:</div>
          <div>{{recordInfo.dept && recordInfo.dept.name}}</div>
        </a-col>
        <a-col :span="6">
          <div>$t('basicData.workType'):</div>
          <div>{{recordInfo.profession && recordInfo.profession.name}}</div>
        </a-col>
        <a-col :span="6">
          <div>{{ $t('other.dormitory') }}:</div>
          <div>{{recordInfo.dormitory}}</div>
        </a-col>
        <a-col :span="6">
          <div>录用日期:</div>
          <div>{{recordInfo.hireTime}}</div>
        </a-col>
        <a-col :span="6">
          <div>岗位状态:</div>
          <div>{{recordInfo.postStatus ? '离职': '在职'}}</div>
        </a-col>
        <a-col :span="6">
          <div>离职日期:</div>
          <div>{{recordInfo.dimissionTime}}</div>
        </a-col>
        <a-col :span="12">
          <div>离职原因:</div>
          <div class="mb-20">{{recordInfo.dimissionReason}}</div>
        </a-col>
      </a-row>
      <div class='blue-line mb-13'>其他信息</div>
      <a-row :gutter="40">
        <a-col :span="6">
          <div>省市区:</div>
          <div>{{recordInfo.provinceName ?`${recordInfo.provinceName}-${recordInfo.cityName}-${recordInfo.districtName}` : ''}}</div>
        </a-col>
        <a-col :span="12">
          <div>详细地址:</div>
          <div>{{recordInfo.detailAddress}}</div>
        </a-col>
      </a-row>
      <a-row :gutter="40">
        <a-col :span="6">
          <div>开户行:</div>
          <div class="mb-20">{{recordInfo.depositBank}}</div>
        </a-col>
        <a-col :span="6">
          <div>银行卡号:</div>
          <div class="mb-20">{{recordInfo.bankCardNo}}</div>
        </a-col>
      </a-row>
      <div class="text-right">
        <a-space>
          <a-button @click="closeTab" class="cancel">{{$t('common.cancel')}}</a-button>
        </a-space>
      </div>

      <a-modal :visible="previewVisible" :title="$t('other.viewPic')" :footer="null" @cancel="() => handlePreviewToggle(false)">
        <img alt="example" style="width: 100%" :src="previewImage" />
      </a-modal>
    </a-spin>
  </div>
</template>
<script setup  name="staffDetails">
import axios from '@/utils/request'
import { cloneDeep } from 'lodash'
import { useRoute, useRouter } from 'vue-router'
import { formatTime } from '@/utils'
import { ref, computed, onMounted } from 'vue'
import { store } from '@/store'
const route = useRoute()
const router = useRouter()
let previewVisible = ref(false)
let previewImage = ref('')
let recordInfo = ref({})
let loading = ref(false)
const tabs = computed(() => {
  return store.state.setting.tabs
});


const closeTab = async () => {
  const tableList = cloneDeep(tabs.value)
  let changeTabs = tableList.filter((i) => i.path !== route.path)
  await store.commit('updateState', { tabs: changeTabs })

  router.replace({ path: '/sysManage/staff' })
}

const handlePreviewToggle = (value, url) => {
  if (value) previewImage.value = url
  previewVisible.value = value
}


const initFormData = async () => {
  const record = recordInfo.value
  let { province, city, district, postIds, birthdate, dimissionTime, hireTime } = recordInfo.value
  if (hireTime) record.hireTime = formatTime(hireTime)
  if (birthdate) record.birthdate = formatTime(birthdate)
  if (dimissionTime) record.dimissionTime = formatTime(dimissionTime)
  if (province) record.address = [province, city, district]
  if (postIds) record.postIds = postIds[0]

}

const getDetailInfo = async (id) => {
  try {
    const res = await axios.getAction('/api/system/user/get', { id })
    if (res.success) recordInfo.value = res.data
  } catch {
    closeTab()
  }
}

onMounted(async () => {
  if (!route.query.id) {
    closeTab()
  } else {
    loading.value = true
    if (route.query.id) await getDetailInfo(route.query.id)
    initFormData()
    loading.value = false
  }
})
</script>
